<script lang="ts" setup>
import {reactive, ref} from "vue";
import {getMenuTree} from '@/api/system'
import DataForm from "@/components/data-form/index.vue";

const dataFormRef = ref<InstanceType<typeof DataForm>>();
const enums = ref<{[key:string]: any}>({});
const menuTreeRef = ref();
const menuTreeData = ref<any[]>([]);
const menuTreeChecked = ref<string[]>([]);
const form = reactive({
    roleId: undefined,
    roleName: undefined,
    alias: undefined,
    remark: undefined,
    checks: undefined,
    menus: [],
})

const onBeforeSubmit = (done: any) => {
    let checked = menuTreeRef.value?.getCheckedNodes(false);
    let halfChecked = menuTreeRef.value?.getHalfCheckedNodes();
    form.menus = [...checked, ...halfChecked] as any
    done();
}

const open = (options: OpenFormConfig) => {
    getMenuTree().then(({code, data}) => {
        if (code === 200){
            menuTreeData.value = data.rows;
        }
    }).then(() => {
        const data = options.type === 'post'? options.data:[options.data];

        const temp = {checks: [], menus: []}
        data.reduce((pre: any, cur: any) => {
            pre.checks.push({label: cur.alias, value: cur.roleId});
            pre.menus.push(...cur.menus.map((item: any) => item.menuId));
            return pre;
        }, temp)
        enums.value.checks = temp.checks;
        menuTreeChecked.value = [...new Set(temp.menus)];

        if (Array.isArray(options.data)) options.data = {}
        options.data.checks = enums.value.checks.map((item: any) => item.value);
    }).then(() => {
        dataFormRef.value?.open(options);
    })
};

defineExpose({open})
</script>

<template>
    <data-form ref="dataFormRef" :model="form" description="角色" :rule-field="['roleName', 'alias']" :before-submit="onBeforeSubmit">
        <el-form-item prop="roleId" v-show="false">
            <el-input v-model="form.roleId"/>
        </el-form-item>
        <el-form-item label="英文名称" prop="roleName">
            <el-input v-model="form.roleName"/>
        </el-form-item>
        <el-form-item label="中文名称" prop="alias">
            <el-input v-model="form.alias"/>
        </el-form-item>
        <el-form-item label="描述" prop="remark">
            <el-input v-model="form.remark"/>
        </el-form-item>
        <el-form-item label="继承角色" prop="checks">
            <el-select v-model="form.checks" disabled multiple>
                <el-option v-for="(item, index) in enums.checks" :key="index" :label="item.label" :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="权限分配" prop="menuId">
            <el-tree ref="menuTreeRef"
                     :accordion="true"
                     :check-strictly="true"
                     :check-on-click-node="true"
                     :data="menuTreeData"
                     :default-checked-keys="menuTreeChecked"
                     :expand-on-click-node="true"
                     :show-checkbox="true"
                     node-key="menuId"
                     style="height: 30vh; width: 100%; overflow: auto">
                <template #default="{ node, data }">
                    <span v-if="data.type === '1' && data.parentId !== '0'">{{ node.label }}&nbsp;({{data.perms}})</span>
                </template>
            </el-tree>
        </el-form-item>
    </data-form>
</template>
